<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/index/order' }">订单数据详情</el-breadcrumb-item>
    <!-- <el-breadcrumb-item :to="{ path: '/index/orderlist' }">订单商品详情</el-breadcrumb-item> -->
    <!-- <el-breadcrumb-item>promotion detail</el-breadcrumb-item> -->
  </el-breadcrumb>
  <el-card class="box-card">
    <el-table :data="state.User" style="width: 100%;text-align: center;">
    <el-table-column label="订单号" prop="orderid" width="130px"/>
    <el-table-column label="下单时间" prop="time" width="130px"/>
    <el-table-column label="用户姓名" prop="name" width="130px"/>
    <el-table-column label="用户电话" prop="phone" width="160px"/>
    <el-table-column label="收货地址" prop="address" />
    <el-table-column label="订单状态" prop="status" width="130px" />
    <el-table-column align="right" >
      <template #header>
        <el-input v-model="search" size="small" placeholder="搜索订单" @click="find()"/>
      </template>
      <template #default="scope">
              <el-button 
              size="small"
              @click="handleEdit(scope.row)"
            >详情</el-button>
            <el-button 
              size="small"
              @click="orderEdit(scope.row)"
            >编辑</el-button>
        <el-button
          :plain="true"
          size="small"
          type="danger"
          @click="handleDelete(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
  style="margin:25px auto 25px;height:50px;width:auto"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="state.total"
      :page-size="state.pageSize"
      :current-page="state.currentPage"
      :page-sizes="state.pageSizes"
      @size-change="sizeChange"
      @current-change="changePage"
    />
  </el-card>
  
</template>

<script  setup>
import axios from 'axios'
import {  onMounted, ref } from 'vue'
import { ElMessage ,ElMessageBox} from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
import { order_dellist, order_list } from '../../utils/api'
const state = ref({
  User: [],
  total: 0,
  pageSize: 10,
  currentPage: 1,
  pageSizes: [3, 5, 10, 20, 50, 100], //可选择的一页多少条
});
const orderlistData=ref({list:[]})
const changePage = (val) => {
  console.log("翻页，当前为第几页", val);
  state.value.currentPage = val;
  orderlist()
};
const sizeChange = (val) => {
  console.log("改变每页多少条，当前一页多少条数据", val);
  state.value.pageSize = val;
  state.value.currentPage = 1;
  orderlist()
};
var $router=useRouter()
const search = ref('')
// 跳转订单详情
const handleEdit = (row) => {
  $router.push({
    path:'/index/orderlist',
    query:{
      order:row.orderid
    }
  })
}
//跳转 编辑页面
const orderEdit=(row)=>{
  $router.push({
    path:'/index/editorder',
    query:row
  })
}
//删除订单
const handleDelete = (row) => {
 order_dellist(row.orderid).then((res)=>{
  orderlist()
 })
  // axios.post('/api/order/dellist',{id:row.orderid}).then((res)=>{
  //   orderlist()
  // })
  ElMessage({
    message: '该订单已删除',
    type: 'success',
  })
}
// 跳转搜索页面
const find=()=>{
  $router.push('/index/order/search')
}
// 获取订单数据
const orderlist=()=>{
  order_list().then((res)=>{
    orderlistData.value.list=res.data.list
    orderlistPage()
  })
  // axios.get('/api/order/list').then((res)=>{
  //   orderlistData.value.list=res.data.list
  //   orderlistPage()
  // })
}
// 渲染订单数据
onMounted(()=>{
  orderlist()
})
// 实现分页
const orderlistPage=()=>{
  state.value.User=orderlistData.value.list.slice(
    (state.value.currentPage - 1) * state.value.pageSize,
    state.value.currentPage * state.value.pageSize,
  );
  state.value.total=orderlistData.value.list.length;
}
</script>
<style scoped>
colgroup {
  height:50px
}
.el-table__body .el-table__row .el-table_1_column_8{
  width: 200px;
}
.el-breadcrumb {
  height: 40px;
  margin-bottom: 10px;
  line-height: 40px;
}
.el-table__cell {
  width: auto;
}
</style>